<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <a-menu mode="horizontal" :selectedKeys="selectedKeys" type="inner">
        <a-menu-item key="/platformManagement/applications/messageConfig/sysInfo" v-if="$hasRouteAuth('appSysInfo')">
          <router-link :to="{ name: 'appSysInfo', query: $route.query }">
            {{ $t('modules.menu.appSysInfo') }}
          </router-link>
        </a-menu-item>
        <a-menu-item
          key="/platformManagement/applications/messageConfig/companyWxConfig"
          v-if="$hasRouteAuth('appCompanyWxConfig')"
        >
          <router-link :to="{ name: 'appCompanyWxConfig', query: $route.query }">
            {{ $t('modules.menu.appCompanyWxConfig') }}
          </router-link>
        </a-menu-item>
        <a-menu-item
          key="/platformManagement/applications/messageConfig/mailConfig"
          v-if="$hasRouteAuth('appMailConfig')"
        >
          <router-link :to="{ name: 'appMailConfig', query: $route.query }">
            {{ $t('modules.menu.appMailConfig') }}
          </router-link>
        </a-menu-item>
      </a-menu>
      <route-view></route-view>
    </a-card>
  </div>
</template>

<script>
import { RouteView } from '@/layouts';
import { mixinDevice } from '@/utils/mixin';
export default {
  name: 'MessageConfig',
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {
      // horizontal  inline
      mode: 'inline',

      selectedKeys: []
    };
  },
  created() {
    this.updateMenu();
  },
  watch: {
    $route(val) {
      this.updateMenu();
    }
  },
  methods: {
    updateMenu() {
      const routes = this.$route.matched.concat();
      this.selectedKeys = [routes[4].path];
    },
    beforeRouteEnter(to, from, next) {
      const fromRoute = from.name;
      next(vm => {
        vm.routerCanBack = !!fromRoute;
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
